<template>
    <div class="menu">
        <el-menu
            default-active="2"
            :unique-opened="true"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#0048AA"
            text-color="#fff"
            :router="true"
            active-text-color="#ffd04b">
            <template v-for="(item, index) in menu">
                <template v-if="item.children">
                    <el-submenu :key="index" :index="item.path">
                        <template slot="title">
                            <span>{{item.name}}</span>
                        </template>
                        <el-menu-item-group>
                            <template v-for="(child, index) in item.children">
                                <template v-if="child.children">
                                    <el-submenu :key="index" :index="child.path">
                                        <template slot="title"><span>{{ child.name }}</span></template>
                                        <el-menu-item-group>
                                            <template v-for="three in child.children">
                                                <el-menu-item :key="three.id" :index="three.id">{{ three.name }}</el-menu-item>
                                            </template>
                                        </el-menu-item-group>
                                    </el-submenu>
                                </template>
                                <template v-else>
                                    <el-menu-item :key="index" :index="child.path">{{ child.name }}</el-menu-item>
                                </template>
                            </template>
                        </el-menu-item-group>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :key="index" :index="item.path">
                        <span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: 'Menu',
    props: ['menu'],
    data () {
        return {
        }
    },
    methods: {
        handleOpen (key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose (key, keyPath) {
            console.log(key, keyPath)
        }
    }
}
</script>

<style lang="less" scoped>
.menu {
    height: calc(100vh - 60px); box-sizing: border-box; padding: 20px 0;
}
/deep/.el-menu-item, .el-submenu__title {
    height: 40px !important; line-height: 40px !important;
}
</style>
